<template>
    <div class="MJcontainer">
        <div class="left">
            <div class="common">
                <div class="promptHeader">
                    <div class="title"><img class="w-[24px] h-[24px]" :src="IconPrompt" />
                        <div class="titleText">提示词(Prompt)</div>
                    </div>
                    <div class="promatButtons">
                        <div class="promatButtonsText">获取图片提示词</div>
                        <div class="promatButtonsText">精简提示词</div>
                    </div>
                </div>
                <l-textarea v-model="promptValue" maxlength="1024" :rows="6" :clearable="true" :show-word-limit="false"
                    :contentStyle="{
                        width: '384px',
                        height: '77px',
                        fontFamily: 'PingFang SC, PingFang SC',
                        fontWeight: '400',
                        fontSize: '12px',
                        background: '#121318',
                        color: '#616772',
                        lineHeight: '14px'
                    }" :customStyle="{
                        borderColor: '#000',
                        color: '#fff',
                        paddingBottom: '4px',
                        background: '#121318'

                    }">
                    <template #length-suffix>
                        <div class="length-suffix justify-end">
                            <el-button v-if="appStore?.getDrawConfig?.translate_type == 2" type="default" :link="true"
                                class="ml-[10px]" :icon="Switch" :loading="isTranslate" @click="translatePrompt()">

                            </el-button>
                            <el-button type="default" :link="true" class="ml-[10px]" :icon="CopyDocument"
                                @click="copyContent(promptValue)">

                            </el-button>
                            <el-button type="default" :link="true" class="ml-[10px]" :icon="Delete"
                                @click="promptValue = ''">

                            </el-button>
                        </div>
                    </template>
                </l-textarea>
            </div>
            <div class="common ">
                <div class="referencePictureHeader">
                    <div class="title">
                        <img class="w-[24px] h-[24px]" :src="IconPrompt" />
                        <div class="titleText">参考图片</div>
                    </div>
                    <div class="extra">上传后将基于参考图片生成画作</div>
                </div>
                <upload class="w-full mt-[10px]" :show-progress="true" :data="{
                        type: 'draw'
                    }" :limitSize="10" @success="(val) => (picValue = val.data.path)">
                    <div class="flex flex-col items-center justify-center upload-view-box">
                        <template v-if="!picValue">
                            <el-icon style="margin-top: 10px" :size="40"><upload-filled /></el-icon>
                            <div style="margin-top:10px;width: 48px;height: 17px;font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 12px;color: #616772;line-height: 14px;text-align: left;font-style: normal;text-transform: none;"
                                class="mt-[6px]">上传图片</div>
                            <div
                                style="margin-top:7px;margin-bottom:15px;width: 158px;height: 14px;font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 10px;color: #616772;line-height: 12px;text-align: left;font-style: normal;text-transform: none;">
                                支持的文件类型jpg,png,webp</div>
                        </template>
                        <template v-else>
                            <el-image class="w-full h-[90px]" :src="picValue" fit="contain" />
                            <div class="upload-view-item">
                                <el-icon size="24" class="upload-clear" color="#ffffff" @click.stop="picValue = ''">
                                    <CircleCloseFilled />
                                </el-icon>
                                <el-button type="primary">重新上传</el-button>
                            </div>
                        </template>
                    </div>
                </upload>
            </div>
            <div class="common random">
                <div class="referencePictureHeader">
                    <div class="title">
                        <img class="w-[24px] h-[24px]" :src="IconPrompt" />
                        <div class="titleText">随机种子</div>
                    </div>
                    <div class="extra randomExtra">填入后将使用seed对应的图片噪音生成画作</div>
                </div>
                <el-input :input-style="{

                        width: '100%',
                        height: '34px',
                        borderRadius: '8px 8px 8px 8px',
                        fontFamily: 'PingFang SC, PingFang SC',
                        fontWeight: '400',
                        fontSize: '12px',
                        color: '#616772',
                        lineHeight: '14px'
                    }" v-model="random" placeholder="34336339" />
            </div>
            <div class="divideLine">
                <div class="lineTitle">绘图设置</div>
                <div class="line"></div>
                <div class="EyeIcon">
                    <template v-if="plotSetting === true">
                        <ElIcon :size="24">
                            <View @click="plotSetting = false"
                                style="margin-left: 3px; color: #616772;cursor: pointer;" />
                        </ElIcon>
                    </template>
                    <template v-if="plotSetting === false">
                        <ElIcon :size="24">
                            <Hide @click="plotSetting = true"
                                style="margin-left: 3px; color: #616772;cursor: pointer;" />
                        </ElIcon>
                    </template>
                </div>
            </div>
            <template v-if="plotSetting === true">
                <div class="common random">
                    <div class="referencePictureHeader">
                        <div class="title">
                            <img class="w-[24px] h-[24px]" :src="IconPrompt" />
                            <div class="titleText">模型版本(Version)</div>
                        </div>

                    </div>
                    <el-select v-model="versionValue" placeholder="Select" style="width: 438px;">
                        <el-option v-for="item in versionOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </div>
                <div class="common">
                    <div class="referencePictureHeader">
                        <div class="title">
                            <img class="w-[24px] h-[24px]" :src="IconPrompt" />
                            <div class="titleText">质量等级(Quality)</div>
                        </div>

                    </div>
                    <div class="flex flex-wrap gap-4">
                        <el-card class="card" shadow="always">
                            <div class="cardTitle"> 超低质量</div>
                            <div class="cardIntro"> 参数==1.25</div>
                        </el-card>
                        <el-card class="card" shadow="hover">
                            <div class="cardTitle"> 低质量</div>
                            <div class="cardIntro"> 参数==1.25</div>
                        </el-card>
                        <el-card class="card" shadow="never">
                            <div class="cardTitle"> 标准质量</div>
                            <div class="cardIntro"> 参数==1.25</div>
                        </el-card>
                    </div>

                </div>
                <div class="common">
                    <div class="referencePictureHeader">
                        <div class="title">
                            <img class="w-[24px] h-[24px]" :src="IconPrompt" />
                            <div class="stylizedLevels ">风格化等级(Quality)</div>
                        </div>
                        <div class="extra stylizedLevelsExtra">Stylize当前版本下数值范围为0-1000</div>
                    </div>
                    <div class="flex flex-wrap gap-4">
                        <el-card class="card" shadow="always">
                            <div class="cardTitle"> 低</div>
                            <div class="cardIntro"> 参数==1.25</div>
                        </el-card>
                        <el-card class="card" shadow="hover">
                            <div class="cardTitle"> 中等</div>
                            <div class="cardIntro"> 参数==1.25</div>
                        </el-card>
                        <el-card class="card" shadow="never">
                            <div class="cardTitle"> 高</div>
                            <div class="cardIntro"> 参数==1.25</div>
                        </el-card>
                        <el-card class="card" shadow="never">
                            <div class="cardTitle"> 超高</div>
                            <div class="cardIntro"> 参数==1.25</div>
                        </el-card>
                    </div>

                </div>
                <div class="common stylizedMethod">
                    <div class="referencePictureHeader">
                        <div class="title">
                            <img class="w-[24px] h-[24px]" :src="IconPrompt" />
                            <div class="titleText">风格模式(Quality)</div>
                        </div>
                        <div class="extra stylizedLevelsExtra">Stylize当前版本下数值范围为0-1000</div>
                    </div>
                    <div class="flex flex-wrap gap-4">
                        <el-card class="card" shadow="always">
                            <div class="cardTitle"> 默认</div>
                            <div class="cardIntro"> 无参数</div>
                        </el-card>
                        <el-card class="card" shadow="hover">
                            <div class="cardTitle"> 原始</div>
                            <div class="cardIntro"> 参数--style raw</div>
                        </el-card>
                    </div>

                </div>
            </template>
        </div>
        <div class="right">
            <div class="modelIcon">
                <img class="w-[291.36px] h-[275.43px]" :src="AdvancedModel" />
            </div>
            <div class="send">
                <el-input :input-style="{
                        width: '100%',
                        height: '76px',
                        borderRadius: '8px 8px 8px 8px',
                        fontFamily: 'PingFang SC, PingFang SC',
                        fontWeight: '400',
                        fontSize: '12px',
                        color: '#616772',
                        lineHeight: '19px'
                    }"
                    placeholder="best quality best quality ,1 cat, mini figures,chibi,3d,c4d,oc,abs,pvc,popmart,pixar--version nii--ar 1：1">
                    <template #append>
                        <div class="append"></div>
                    </template>
                </el-input>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Delete, Switch, CopyDocument, Hide, View } from '@element-plus/icons-vue'
import IconPrompt from '@/assets/images/drawing/icon_prompt.png'
import AdvancedModel from '@/assets/images/advancedModel.png'
import LTextarea from '~/components/l-textarea/index.vue'
import KeywordSuggestion from '~/pages/app/drawing/component/drawing-control/components/keyword-suggestion.vue'
import { useAppStore } from '~/stores/app'
import { useLockFn } from '~/composables/useLockFn'
import { keywordPromptTranslate } from '~/api/drawing'

import Upload from '~/components/upload/index.vue'
import { CircleCloseFilled, UploadFilled } from '@element-plus/icons-vue'
import { ElIcon } from 'element-plus'
//提示词
const appStore = useAppStore()
const promptValue = ref('')
// 请求翻译
const { isLock: isTranslate, lockFn: translatePrompt } = useLockFn(async () => {
    try {
        if (promptValue.value.trim() == '') {
            feedback.msgError('请输入描述词')
            return
        }
        const { promptEn } = await keywordPromptTranslate({
            prompt: promptValue.value
        })
        promptValue.value = promptEn
    } catch (error) {
        console.log('翻译失败=>', error)
    }
})
//复制文本
const { copy } = useCopy()
const copyContent = async (content: string) => {
    await copy(content)
}

//上传图片
const picValue = ref(null as any)
//随机种子
const random = ref('')
//版本
const versionValue = ref('1')
const versionOptions = [
    {
        value: '版本1',
        label: '1',
    }
]

const plotSetting = ref(false)
</script>
<style lang="scss" scoped>
.MJcontainer {

    display: flex;
    height: 1119px;
    width: 100%;

    .left {

        min-width: 501px;
        height: 1119px;
        border-radius: 0px 0px 0px 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        //justify-content: space-between;

        .promptHeader {
            display: flex;
            justify-content: space-between;
            margin-bottom: 9px;
            font-size: 14px;
        }

        .title {
            display: flex;
            align-items: center;

            .titleText {
                width: 118px;
                height: 20px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }


        }

        .promatButtons {
            width: 300px;
            height: 25px;
            border-radius: 4px 4px 4px 4px;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;

            .promatButtonsText {
                margin-left: 10px;
                padding: 4px 7px;
                border-radius: 4px 4px 4px 4px;
                border: 1px solid #8B8E92;
                // width: 75px;
                // height: 17px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 10px;
                color: #8B8E92;
                line-height: 12px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }

        .referencePictureHeader {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            color: #fff;
            margin-bottom: 10px;

            .extra {
                margin-left: -50px;
                width: 140px;
                height: 14px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 10px;
                color: #616772;
                line-height: 12px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .randomExtra {
                width: 200px;
            }

            .stylizedLevelsExtra {
                width: 200px;
                margin-left: 8px;
            }

        }

        .divideLine {
            display: flex;
            width: 460px;
            height: 33px;
            border-radius: 0px 0px 0px 0px;
            align-items: center;
            justify-content: space-between;

            .lineTitle {
                width: 48px;
                height: 17px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #616772;
                line-height: 14px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .line {
                width: 370px;
                height: 1px;
                background-color: #616772;
            }
        }
    }

    .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        //min-width: 1412px;
        flex: 1;
        height: 1119px;

        background: #262932;
        border-radius: 8px 8px 8px 8px;

        .modelIcon {
            height: 785px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .send {
            width: 100%;
            flex: 1;
            margin-bottom: 15px;
            //height: 76px;
            //background: #121318;
            padding: 0px 10px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;

            :deep(.el-input__wrapper) {
                background-color: rgba(0, 0, 0, 0.3) !important;

            }

            :deep(.el-input-group__append) {
                background-color: rgba(0, 0, 0, 0.3) !important;
            }

            //border-radius: 6px 6px 6px 6px;
            .append {
                margin: 0px 0px;
                width: 82px;
                height: 48px;
                background: #F86E07;
                border-radius: 6px 6px 6px 6px;


            }
        }

    }
}

//提示
.length-suffix {
    position: absolute;
    bottom: 0;
    left: 0px;
    font-size: 14px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    background:var(--el-bg-color-base);

}

// 上传参考图
.upload-view-box {
    position: relative;
    width: 428px;
    height: 124px;
    border-radius: 8px 8px 8px 8px;
    border-right: 4px;
    border: 1px dashed #dcdfe6;

    .upload-view-item {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.3);
    }

    .upload-clear {
        position: absolute;
        right: 20px;
        top: 14px;
        cursor: pointer;
    }
}

.upload-view-box:hover .upload-view-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.common {
    width: 460px;
   // height: 180px;
    background: #262932;
    border-radius: 8px 8px 8px 8px;
    padding: 10px;
    margin-bottom: 20px;
}

.random {
    height: 90px;
    margin-bottom: 10px;

    :deep(.el-input__wrapper) {
        background-color: rgba(0, 0, 0, 0.3) !important;

    }
}

.create {
    margin-top: 10px;
    width: 460px;
    height: 180px;
    border-radius: 8px 8px 8px 8px;
    //margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .startCreateButton {

        cursor: pointer;
        width: 100%;
        height: 41px;
        background: #F86E07;
        border-radius: 8px 8px 8px 8px;
        display: flex;
        justify-content: center;
        align-items: center;

        .startCreateText {
            width: 64px;
            height: 22px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 19px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }
}

.stylizedMethod {
    margin-bottom: 0px;
    height: 104px;
}

.card {
    width: 206px;
    height: 48px;
    background: #363A46;
    box-shadow: 0px 0px 6px 0px rgba(248, 110, 7, 0.5);
    border-radius: 4px 4px 4px 4px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .cardTitle {

        //width: 48px;
        height: 17px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        line-height: 14px;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }

    .cardIntro {
        //width: 55px;
        height: 14px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 10px;
        color: #8B8E92;
        line-height: 12px;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
}
</style>
